import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, StatusBar, TouchableOpacity } from "react-native";
import { Icon, Input } from "@rneui/themed";
import Modal from "react-native-modal";
import LinearGradinet from 'react-native-linear-gradient';
import Toast from 'react-native-simple-toast'
import QRCode from 'react-native-qrcode-svg';
import { Shadow } from "react-native-shadow-2";
import { getValue } from "@/utils/deviceStorage";
import { getLabel } from "@/utils/util";

const { width, height, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const Receive = (props) => {

    const [coinType, setCoinType] = useState('')
    const [address, setAddress] = useState('')
    const [modalVisible, setModalVisible] = useState(false)
    const [amount, setAmount] = useState('')
    const [remark, setRemark] = useState('')

    useEffect(() => {
        let params = props.route.params
        let obj = getValue('selectedWallet')
        setAddress(obj && obj.address)
        let str
        if (params && params.source === 'main') {
            str = getValue('coinType')
        } else if (params && params.source === 'assets') {
            str = params.coinType
        }
        setCoinType(str)
    }, [])

    const handlePressBack = () => {
        props.navigation.goBack()
    }

    const handlePressShare = () => {

    }

    const handlePressExchange = () => {

    }

    const handlePressCopy = () => {
        Toast.showWithGravity(
            'Address copied to clipboard',
            Toast.SHORT,
            Toast.CENTER)
    }

    const handlePressShow = () => {
        props.navigation.navigate('show-private-key')
    }

    const handlePressConfirm = () => {

    }

    return (
        <View style={styles.container}>
            <StatusBar backgroundColor='#5B6DFD' barStyle='light-content' />
            <View style={styles.content1}>
                <View style={{ flexDirection: 'row', width: width, alignItems: 'center', justifyContent: 'space-between', marginTop: 20 * ratio }}>
                    <Icon type="antdesign" name="left" size={16} color='#FFFFFF' style={{ marginLeft: 15 * ratio }} onPress={handlePressBack} />
                    <Text style={styles.title1}>Receive</Text>
                    <Icon type="feather" name="more-vertical" size={18} color='#FFFFFF' style={{ marginRight: 15 * ratio }} onPress={() => { setModalVisible(true) }} />
                </View>
            </View>
            <View style={{ flex: 1, alignItems: 'center', marginTop: -118 * ratio }}>
                <Shadow offset={[3, 6]}
                    distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={5}>
                    <View style={styles.QRCodeContent}>
                        <TouchableOpacity onPress={handlePressShare}
                            style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', marginRight: 14 * ratio, marginTop: 12 * ratio }}>
                            <Icon type="simple-line-icon" name="share-alt" size={13} color='#000000' style={{ marginRight: 4 * ratio }} />
                            <Text style={styles.title4}>Share</Text>
                        </TouchableOpacity>
                        <View style={{ alignItems: 'center', marginTop: 14 * ratio }}>
                            <Text style={styles.title2}>{getLabel(coinType)} Receive address</Text>
                        </View>
                        {address ?
                            <View style={{ alignItems: 'center', marginTop: 35 * ratio }}>
                                <QRCode
                                    value={address}
                                    logoBorderRadius={5}
                                    color='#000000'
                                    backgroundColor='#FFFFFF'
                                    size={200}
                                />
                            </View>
                            : <></>}
                        <View style={{ alignItems: 'center', marginTop: 48 * ratio }}>
                            <View style={styles.addressContent}>
                                <View style={{ ...styles.title3, width: 200 * ratio, marginLeft: 12 * ratio }}>
                                    <Text>{address}</Text>
                                </View>
                                <View style={styles.divider1}></View>
                                <TouchableOpacity onPress={handlePressExchange}>
                                    <Text style={{ ...styles.title5, color: '#5D5D5D', marginLeft: 15 * ratio }}>Exchange</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={{ alignItems: 'center', marginTop: 16 * ratio }}>
                            <TouchableOpacity onPress={handlePressCopy}>
                                <LinearGradinet colors={['#5B6DFD', '#4451B5']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button1}>
                                    <Text style={{ ...styles.title3, color: '#FFFFFF' }}>Copy address</Text>
                                </LinearGradinet>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={handlePressShow} style={styles.button2}>
                                <Text style={{ ...styles.title3, color: '#5B6DFD' }}>Show private key</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Shadow>
            </View>
            <View style={{ alignItems: 'center', marginBottom: 50 * ratio }}>
                <Text style={{ ...styles.title5, width: 220 * ratio }}>
                    * Please check the currency. Other currencies transferred to this address will not be retrieved
                </Text>
            </View>
            <Modal
                isVisible={modalVisible}
                backdropColor='#000000'
                backdropOpacity={0.41}
                style={styles.modalContent}
            >
                <View style={styles.moreContent}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 17 * ratio }}>
                        <View style={{ flex: 2 }}></View>
                        <View style={{ flex: 6, alignItems: 'center' }}>
                            <Text style={{ ...styles.title4, color: '#262626' }}>Set collection amount</Text>
                        </View>
                        <View style={{ flex: 2 }}>
                            <Icon type="ionicon" name="close-sharp" size={20} color='#262626' onPress={() => { setModalVisible(false) }} />
                        </View>
                    </View>
                    <View style={{ ...styles.divider2, marginTop: 15 * ratio }}></View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 7 * ratio }}>
                        <View style={{ flex: 5 }}>
                            <Text style={{ ...styles.title4, color: '#A6A6A6', marginLeft: 25 * ratio }}>Collection amount</Text>
                        </View>
                        <View style={{ flex: 5, alignItems: 'center' }}>
                            <Input
                                containerStyle={{ height: 40 * ratio }}
                                onChangeText={text => setAmount(text)}
                                value={amount}
                                placeholder='0.00'
                                placeholderTextColor='#A6A6A6'
                                inputContainerStyle={{ borderBottomWidth: 0 }}
                                inputStyle={{ fontSize: 14, textAlign: 'right', paddingRight: 27 * ratio }}
                            />
                        </View>
                    </View>
                    <View style={{ ...styles.divider2, marginTop: 7 * ratio }}></View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * ratio }}>
                        <View style={{ flex: 5 }}>
                            <Text style={{ ...styles.title4, color: '#A6A6A6', marginLeft: 25 * ratio }}>Remark</Text>
                        </View>
                        <View style={{ flex: 5, alignItems: 'center' }}>
                            <Input
                                containerStyle={{ height: 40 * ratio }}
                                onChangeText={text => setRemark(text)}
                                value={remark}
                                placeholder='optional'
                                placeholderTextColor='#A6A6A6'
                                inputContainerStyle={{ borderBottomWidth: 0 }}
                                inputStyle={{ fontSize: 14, textAlign: 'right', paddingRight: 27 * ratio }}
                            />
                        </View>
                    </View>
                    <View style={{ ...styles.divider2, marginTop: 7 * ratio }}></View>
                    <TouchableOpacity onPress={handlePressConfirm}>
                        <LinearGradinet colors={['#5B6DFD', '#4451B5']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button3}>
                            <Text style={{ ...styles.title3, color: '#FFFFFF' }}>Confirm</Text>
                        </LinearGradinet>
                    </TouchableOpacity>
                </View>
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        height: height,
        backgroundColor: '#F5F6FA'
    },
    content1: {
        width: width,
        height: 207 * ratio,
        backgroundColor: '#5B6DFD',
        borderBottomLeftRadius: 30,
        borderBottomRightRadius: 30
    },
    QRCodeContent: {
        width: 340 * ratio,
        height: 530 * ratio,
        backgroundColor: '#FEFEFE',
        borderRadius: 5
    },
    addressContent: {
        width: 305 * ratio,
        height: 55 * ratio,
        backgroundColor: '#F5F6FA',
        borderRadius: 8,
        alignItems: 'center',
        flexDirection: 'row'
    },
    modalContent: {
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    moreContent: {
        width: width,
        height: 263 * ratio,
        backgroundColor: '#FFFFFF',
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        marginBottom: -20 * ratio,
        alignItems: 'center'
    },
    title1: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#F9F9F9',
        lineHeight: 20
    },
    title2: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 18
    },
    title3: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#262626',
        lineHeight: 18
    },
    title4: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#000000',
        lineHeight: 15
    },
    title5: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FF6600',
        lineHeight: 13
    },
    divider1: {
        width: 0,
        height: 13 * ratio,
        borderWidth: 1,
        borderColor: '#5D5D5D',
        marginLeft: 20 * ratio
    },
    divider2: {
        width: 311 * ratio,
        height: 0,
        borderColor: '#F1F1F1',
        borderWidth: 1
    },
    button1: {
        width: 283 * ratio,
        height: 46 * ratio,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    button2: {
        width: 283 * ratio,
        height: 46 * ratio,
        borderRadius: 5,
        backgroundColor: '#FFFFFF',
        borderColor: '#5B6DFD',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 7 * ratio
    },
    button3: {
        width: 272 * ratio,
        height: 45 * ratio,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 24 * ratio
    }
})
export default Receive